<template>
  <div class="main">
    <tabs :defaultTagId="defaultTagId" :custom="false" :tabPaneData="tabPaneData" @change="callback"></tabs>
    <div class="styleTabsMain">
      <div class="headMain" id="baseInfo">
        <div class="headTitle">
          <!-- <a-dropdown>
            <a-button class="style-button">操作
              <a-icon type="down"/>
            </a-button>
            <a-menu slot="overlay" class="style-dropdown-menu">
              <a-menu-item key="edit">编辑</a-menu-item>
            </a-menu>
          </a-dropdown> -->
          <div class="processName">【{{ sourceData.operation }}】</div>
          <div class="processName">{{ deliverableName }} </div>
        </div>
        <!-- 非审核驳回操作 -->
        <div style="padding-top: 4px;padding-bottom:20px;">
          <div v-if="basicInformation.length !== 0">
            <div class="messageContent" v-for="(item, index) in basicInformation" :key="index">
              <div v-for="item1 in item.items" :class="item1.length==1?'message_de':'message_deOne'"
                  :key="item1.id">
                <detailMessage :attrList="item1"></detailMessage>
              </div>
            </div>
          </div>
          <a-empty v-else description="暂无数据" class="nodata"/>
          <h5 v-if="showFileListItems.length" style="margin-top:20px;">相关附件：</h5>
          <a-spin :spinning='loadTable' v-if="showFileListItems.length">
            <common-table :isRowsSelectVisible="false" :isPagination="false" :scrollx="false" :columnWidth="20" :columns="tableColumns" :tableData="showFileListItems" @routerPage="routerPage"></common-table>
          </a-spin>
        </div>
      </div>
      <div id="associatedTaskBook" class="associatedTaskBook">
        <div class="titleBox">
          <span class="title">关联的项目任务书</span>
          <a-button type="primary" v-if="sourceData.operation=='执行变更' && attachmentSelect.length" @click="taskBookChange">修订项目任务书</a-button>
        </div>
        <div class="tableContent">
          <a-empty description="暂无数据" class="nodata"/>
          <!-- <attachment :bookOid="bookOidVal" :bookVersion="bookVersionVal" typeFrom="1" @onlyOne="onlyOneHandle" @selectedData="selectedData"></attachment> -->
        </div>
      </div>
      <div id="processSet" class="processSet"> 
        <div class="titleBox">
          <span class="title">流程设置</span>
          <!-- <a-button type="primary">以起草人身份操作</a-button> -->
        </div>
        <div class="main">
          <div class="process-explain">
            流程说明： <br>
            一、不可控因素“十二条”：<br>
            1、 客户或市场需求变化；<br>
            2、 大生产期间优先保供（需所在单位第一负责人确认）；<br>
            3、 客户试用验证受阻（集团外部客户：需营销公司总经理确认；集团内部客户：需求提出方的研究院院长确认）；<br>
            4、集团内配套零部件项目或主机项目延期造成对方影响（零部件与主机开发必须分属不同研究院，由对方研究院长确认）；<br>
            5、 国家/行业/地方政策、标准、法律法规变化；<br>
            6、 国家检测机构因素；<br>
            7、 自然灾害；<br>
            8、 天气变化；<br>
            9、 意外事故；<br>
            10、长周期外购件供应商未按合同要求供货（需商务或质保部第一负责人确认）；<br>
            11、出口发运周期变化（需发运部门第一负责人确认）；<br>
            12、其余研发管理总部确认的不可控因素。<br>
            二、实施要求：<br>
            1、因不可控因素“十二条”造成研发项目（或节点）延期超过1个月或总开发周期的1/5时，方可调整项目（或节点）完成时间。除此之外，不允许调整项目（或节点）完成时间；<br>
            2、所有项目延期申请需按要求附上相应的证明材料（如各相关部门负责人对延期原因确认的签字文件等），或在事业部审批节点中增加对应部门负责人审批节点。<br>
            <br>
          </div>
            <!--    操作按钮的弹框集合-->
          <commonProcess ref="peocessCon" :step-arr="stepArr" :process-table-is-show="processTableIsShow"
                         :bottom-describe-is-show="isShowBottomDescribe" :table-arr="tableArr"
                         :radio-arr="radioArrLists" @submitProcessPeople="submitProcessPeople"></commonProcess>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
// import attachment from '../../projectTaskBook/mainTaskBook/attachment'
import tabs from "@/components/tabs/tabs"
import processUser from '../editAlteration/modules/processUser'
import detailMessage from "@/components/singlePage/detailMessage";
import commElFilestartUpload from '@/views/singleProject/fileSingle/el-common/comm-el-filestart-upload'//添加交付物模态框
import commonProcess from '@/components/processCommon/approveProcess'
import approveFrom from '@/components/processCommon/createProcess/approveFrom'
import commonTable from '@/components/common/commonTable'
import commModal from "@/views/singleProject/fileSingle/el-common/comm-modal";
import taskTable from "@/views/plmHomePage/toDoPage/comp/taskTable.vue";
import { saveFile } from '@/utils/util'
import { downloadAttachmentFile,TaskBookAttachmentInfo,getTaskBookByProject } from '@/api/taskBook';
import { getDisposeStatus, getRouting, completeWorkItem, reassignWorkItem,getDisplayIdentifier, getAttributeGroup, getProcessSteps } from "@/api/fileSingle.js"
export default {
  data() {
    return {
      processName: '',
      defaultTagId: 'baseInfo',
      userinfo: JSON.parse(sessionStorage.getItem('userInfo')),//用户信息
      basicInformation: [],
      deliverableName: '',
      isShowHistoryVerion: false,
      tabPaneData: [{tagId: 'baseInfo',tagName: '基本信息'},{tagId: 'associatedTaskBook',tagName: '关联的项目任务书'},{tagId: 'processSet',tagName: '流程设置'}],
      bookVersionVal:'',
      bookOidVal: '', // 任务书oid
      isShowSponsor: false,//是否发起人（起草人）
      attachmentSelect: [], // 项目关联的任务书
      processTableIsShow: true,//流程记录表格是否显示
      isShowBottomDescribe: false,//流程处理是否显示
      tableArr: [],//流程记录表格数据
      stepArr: [],//流程视图数据
      radioValues: '',//操作的选择
      radioArrLists: [],//单选框数据
      sourceData:{},//从待办中心传过来的数据
      reassignUser: '',//转办人
      desValues: '',//操作意见
      showFileListItems:[],//文件列表
      tableColumns: [{
          name: 'name',
          displayName: '文件名',
          key: 'name',
          scopedSlots: {
            customRender: "name"
          }
        },
        {
          name: 'updateTime',
          displayName: '上次修改时间',
          dataType: 'String',
          key: 'updateTime',
          fieldType: 'Date',
          scopedSlots: {
            filterDropdown: "filterDropdown",
            filterIcon: "filterIcon",
            customRender: "customRender"
          }
        },
        {
          name: 'updater',
          displayName: '创建者',
          key: 'updater'
        }
      ],
      processUsers:[],
      loadTable: false,
    }
  },
  components: {
    tabs,
    detailMessage,
    commonProcess,
    commModal,
    approveFrom,
    commonTable,
    taskTable,
    commElFilestartUpload,
    processUser
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  destroyed(){
    this.defaultTagId = 'baseInfo'
    // sessionStorage.setItem('changeAlterationData','{}')
  },
  mounted() {
      this.sourceData = JSON.parse(sessionStorage.getItem('changeAlterationData'))
      console.log(this.sourceData)
      this.oid = this.sourceData['process.container.oid']
      this.userId = userInfo.loginName
      this.changeOid = this.sourceData['pboOid']
      this.currentOid = this.changeOid
      if(this.sourceData['workItem.status'] == '已完成'){
        this.isShowBottomDescribe = false;
      }else{
        this.isShowBottomDescribe = true;
      }
      this._getAttributeGroup()
      this._getTaskBookByProject() // 获取任务书oid
      this._getDisplayIdentifier()
      this._getProcessSteps()
      this.getRoutingIndex();
      this._getDisposeStatus()
      this._TaskBookAttachmentInfo();
  },
  methods: {
    submitProcessPeople(radioValues, desValues, userId) {
      this.radioValues = radioValues
      this.desValues = desValues
      this.reassignUser = userId
      if (radioValues === 'TRANSFER') {
        this.onCompleteWorkItemDivTransfers(this.radioValues, this.desValues, this.reassignUser)
      } else {
        this.onCompleteWorkItemDivs(this.radioValues, this.desValues)
      }
    },
    /**
     * 功能：提交流程操作
     */
    onCompleteWorkItemDivs(radioValues, desValues) {
      radioValues = this.radioValues
      desValues = this.desValues
      let parmsInfo = {}
      if (this.radioArrLists.length > 0) {
        parmsInfo = {oid: this.sourceData.workItemOid,routeChoice: radioValues,comment: desValues,custActVar: '',reassignUser: ''}
      } else {
        parmsInfo = {oid: this.sourceData.workItemOid,routeChoice: '',comment: desValues,custActVar: '',reassignUser: ''}
      }
      if(this.sourceData.operation=='执行变更'){
        let that = this;
        this.$confirm({
          title: '是否已完成任务书修订？如未完成请点击“修订项目任务书”修改',
          cancelText: '取消',
          okText: '确认',
          onOk() {
            if (that.radioArrLists.length > 0 && radioValues == '') {
              that.$message.error('请选择操作！');
              return
            }
            if (desValues == '') {
              that.$message.error('请输入处理意见！');
              return
            }
            completeWorkItem(parmsInfo).then((res) => {
              if (res && res.status === 200) {
                if (res.data && res.data.success) {
                  that.$message.success('流程操作成功！')
                  let tabArrNewList = JSON.parse(sessionStorage.getItem('tabArr'))
                  tabArrNewList = tabArrNewList.filter((rec) => {
                    return rec.title !== '变更处理'
                  })
                  that.$store.commit('SET_TABS', tabArrNewList)
                  that.$router.push('/toDoPage');
                } else {
                  that.$message.error(res.data.message)
                }
              } else {
                that.$message.error('接口失败！')
              }
            })
          },
          onCancel() {
            console.log('Cancel');
          },
          class: 'test',
        });
      }else{
        if (this.radioArrLists.length > 0 && radioValues == '') {
          this.$message.error('请选择操作！');
          return
        }
        if (desValues == '') {
          this.$message.error('请输入处理意见！');
          return
        }
        completeWorkItem(parmsInfo).then((res1) => {
          if (res1 && res1.status === 200) {
            if (res1.data && res1.data.success) {
              let tabArrNewLists = JSON.parse(sessionStorage.getItem('tabArr'))
              tabArrNewLists = tabArrNewLists.filter((rec1) => {
                return rec1.title !== '变更处理'
              })
              this.$store.commit('SET_TABS', tabArrNewLists)
              this.$message.success('流程操作成功！')
              this.$router.push('/toDoPage');
            } else {
              this.$message.error(res1.data.message)
            }
          } else {
            this.$message.error('接口失败！')
          }
        })
      }
    },
    //修订项目任务书
    taskBookChange(){
      this.$router.push({
        path: '/single/projectPaper/mainTaskBook'
      })
    },
    /**
     * 功能：提交流程操作--转办
     */
    onCompleteWorkItemDivTransfers(radioValues, desValues, reassignUser) {
      radioValues = this.radioValues
      desValues = this.desValues
      reassignUser = this.reassignUser
      let parmsInfo = {}
      if (this.radioArrLists.length > 0) {
        parmsInfo = {oid: this.sourceData.workItemOid,routeChoice: radioValues,comment: desValues,custActVar: '',reassignUser: reassignUser}
      } else {
        parmsInfo = {oid: this.sourceData.workItemOid,routeChoice: '',comment: desValues,custActVar: '',reassignUser: reassignUser}
      }
      if (this.radioArrLists.length > 0 && radioValues == '') {
        this.$message.error('请选择操作！');
        return
      }
      if (this.radioValues === 'TRANSFER' && this.reassignUser == '') {
        this.$message.error('请选择转办人员！');
        return
      }
      if (desValues == '') {
        this.$message.error('请输入处理意见！');
        return
      }
      reassignWorkItem(parmsInfo).then((res) => {
        if (res && res.status === 200) {
          if (res.data && res.data.success) {
            let tabArrNewList = JSON.parse(sessionStorage.getItem('tabArr'))
            tabArrNewList = tabArrNewList.filter((rec) => {
              return rec.title !== '变更处理'
            })
            this.$message.success('流程操作成功！')
            this.$store.commit('SET_TABS', tabArrNewList)
            this.$router.push('/toDoPage');
          } else {
            this.$message.error(res.data.message)
          }
        } else {
          this.$message.error('接口失败！')
        }
      })
    },
    // 表格数据
    _getTaskBookByProject() {
      getTaskBookByProject({ oid: this.oid, userId: this.userId }).then(({data}) => {
        if (data.success) {
          if (data.data && data.data.length) {
            this.bookOidVal = data.data[0].bookOid
            this.bookVersionVal = data.data[0].version;
          } else {
            this.$message.info(data.message || '暂无任务书数据')
          }
        }
      })
    },
    //查看附件
    _TaskBookAttachmentInfo() {
      this.loadTable = true
      TaskBookAttachmentInfo({ oid: this.changeOid, userId: this.userId }).then(({data}) => {
        if (data.success) {
          if (data.data && data.data.length) {
            this.showFileListItems = data.data;
          } else {
            this.showFileListItems = []
          }
          this.loadTable = false
        }else{
          this.showFileListItems = []
          this.$message.error(data.message)
        }
      })
    },
    //预览附件
    routerPage(values) {
      let nameVal = values.name;
      let str = nameVal.substring(nameVal.lastIndexOf(".")+1);
      let paramsInfo = { userId: this.userId,oid: values.oid}
      downloadAttachmentFile(paramsInfo).then(res1 => {
        if (res1 && res1.status === 200) {
          const blob = new Blob([res1.data], {type: `application/${str}`})
          saveFile(blob, nameVal)
        } else {
          this.$message.warn('导出异常')
        }
      })
    },
    _getDisplayIdentifier() {
      getDisplayIdentifier({oid:this.currentOid}).then((res1) => {
        if (res1 && res1.data && res1.status === 200) {
          if (res1.data.success) {
            // 去掉标题的状态字符 入 A.1-审核，去掉 -审核
            let str = res1.data.message.slice(res1.data.message.length-3,-2)
            if(str=='-'){
              this.deliverableName = res1.data.message.substring(-1,res1.data.message.length-3)
            }else{
               this.deliverableName = res1.data.message
            }
          } else {
            this.deliverableName = ''
            this.$message.error('操作错误')
          }
        } else {
          this.$message.error('接口失败！')
        }
      })
    },
    _getAttributeGroup() { 
      let obj = JSON.parse(sessionStorage.getItem('changeUndoVal'));
      let newArr = [{
        items:[{
          label:'名称',
          value:obj.name
        },{
          label:'编码',
          value:obj.number
        }]
      },{
        items:[{
          label:'变更类别',
          value:obj.ChangeCategory
        },{
          label:'申请延期时间',
          value:obj.DelayDate
        }]
      },{
        items:[{
          label:'所属阶段',
          value:obj.planActivityReference
        },{
          label:'执行现状',
          value:obj.StatusOfImplementation
        }]
      },{
        items:[{
          label:'变更理由',
          value:obj.ReasonForChange
        },{
          label:'变更对项目的影响',
          value:obj.ChangeImpact
        }]
      },{
        items:[{
          label:'具体变更内容-变更前',
          value:obj.BeforeChange
        },{
          label:'具体变更内容-变更后',
          value:obj.AfterChange
        }]
      },{
        items:[{
          label:'负责人',
          value:obj.responsibleUserReference
        },{
          label:'是否剔除考核',
          value:obj.EliminateAppraisal
        }]
      },{
        items:[{
          label:'状态',
          value:obj.stateDisPlay
        }]
      }]
      this.basicInformation = newArr;
      return false;
      //基本信息
      getAttributeGroup({oid: this.currentOid}).then((res1) => {
        if (res1 && res1.status === 200) {
          if (res1.data && res1.data.success) {
            if (res1.data.data.length > 0) {
              this.basicInformation = res1.data.data[0].rows
            } else {
              this.basicInformation = []
            }
          } else {
            this.basicInformation = []
            this.$message.error(res1.data.message)
          }
        } else {
          this.$message.error('接口失败！')
        }
      })
    },
    _getProcessSteps() {
      this.stepArr = [{"name":"提交","userFullName":"王志伟","stateDisplay":"已关闭","oid":"","state":"closed","runningTime":"","order":"0"},{"name":"初审","userFullName":"王志伟","stateDisplay":"正在运行","oid":"OR:wt.workflow.definer.WfAssignedActivityTemplate:26897819843","state":"open_running","runningTime":"0天22小时28分钟","order":"1"},{"name":"审核","userFullName":"王志伟","stateDisplay":"","oid":"OR:wt.workflow.definer.WfAssignedActivityTemplate:26897819816","state":"","runningTime":"","order":"2"},{"name":"院批准","userFullName":"王志伟","stateDisplay":"","oid":"OR:wt.workflow.definer.WfAssignedActivityTemplate:26897820267","state":"","runningTime":"","order":"4"},{"name":"研发管理部批准","userFullName":"王志伟","stateDisplay":"","oid":"OR:wt.workflow.definer.WfAssignedActivityTemplate:26897819806","state":"","runningTime":"","order":"5"},{"name":"执行变更","userFullName":"王志伟","stateDisplay":"","oid":"OR:wt.workflow.definer.WfAssignedActivityTemplate:26897819823","state":"","runningTime":"","order":"9"},{"name":"确认变更结果","userFullName":"王志伟","stateDisplay":"","oid":"OR:wt.workflow.definer.WfAssignedActivityTemplate:26897820257","state":"","runningTime":"","order":"10"}];
      return false;
      // 获取交付物流程节点（流程指引）
      getProcessSteps({oid: this.changeOid}).then((res1) => {
        if (res1 && res1.status === 200) {
          if (res1.data.success) {
            if (res1.data && res1.data.data && res1.data.data !== '' && res1.data.data.length > 0) {
              this.stepArr = res1.data.data.map((item) => {
                item.state = item.state.toLowerCase(); // 统一转化成小写
                return item;
              });
              let arr = res1.data.data.filter((e)=>{
                return e.userFullName !=='';
              })
              this.stepArr = arr
            } else {
              this.isShowSponsor = false
              this.stepArr = []
            }
          } else {
            this.stepArr = []
            this.$message.error(res1.data.message)
          }
        } else {
          this.$message.error('接口失败！')
        }
      })
    },
    _getDisposeStatus() {
      this.tableArr = [{"workCompletedBy":"","workAssignee":"王志伟","workComments":"","workCompletedDate":"","workName":"流程监控任务","workVote":""},{"workCompletedBy":"王志伟","workAssignee":"王志伟","workComments":"","workCompletedDate":"2022-03-16 15:35:26","workName":"提交","workVote":""},{"workCompletedBy":"","workAssignee":"王志伟","workComments":"","workCompletedDate":"","workName":"初审","workVote":""}];
      return false;
      // 获取交付物流程记录
      getDisposeStatus({oid: this.changeOid}).then((res1) => {
        if (res1 && res1.status === 200) {
          if (res1.data && res1.data.success == 'true') {
            if (res1.data.data.length > 0) {
              this.tableArr = _.orderBy(res1.data.data, ['workCompletedDate'], ['desc'])//按照创建时间降序排序
              this.tableArr.splice(0, 0, this.tableArr[this.tableArr.length - 1])      //把最后一个元素复制到首个
              this.tableArr.splice(-1, 1);       //删除最后一个元素
            } else {
              this.tableArr = []
            }
          } else {
            this.tableArr = []
            this.$message.error(res1.data.message)
          }
        } else {
          this.$message.error('接口失败！')
        }
      })
    },
    // 附件只有一行数据回调
    onlyOneHandle(vals) {
      this.attachmentSelect = vals
    },
    // 附件复选框
    selectedData(selectVal) {
      this.attachmentSelect = selectVal
    },
    callback(keyVal) {
      this.defaultTagId = keyVal
      document.querySelector("#" + keyVal).scrollIntoView();
    },
    // getRoutingIndex 获取流程操作
    getRoutingIndex() {
      this.radioArrLists = [{"routing":"通过","lable":"通过"},{"routing":"驳回","lable":"驳回"},{"routing":"TRANSFER","lable":"转办"}];
      return false;
      getRouting({oid: this.sourceData.workItemOid}).then((res1) => {
        if (res1 && res1.status === 200) {
          if (res1.data && res1.data.success) {
            if (res1.data.data && res1.data.data.length > 0) {
              this.radioArrLists = res1.data.data
            } else {
              this.radioArrLists = []
            }
          } else {
            this.radioArrLists = []
            this.$message.error(res1.data.message)
          }
        } else {
          this.$message.error('接口失败！')
        }
      })
    },
  },
};
</script>
<style lang="less" scoped>
  /deep/ .commonTable{
    .ant-table-body{
      min-height: auto;
    }
    .ant-table-placeholder{
      min-height: auto;
      border: none;
    }
  }
</style>
<style lang="less" scoped>
.contentBox{
  padding-top: 11px;
  .content{
    position: relative;
    top: 0px;
    bottom: 72px;
    padding-bottom: 72px;
    .title{
      color: #333;
      font-size: 18px;
      font-weight: bold;
    }
    .form-box{
      padding-top: 20px;
      .row-item {
        display: flex;
        align-items: center;
        padding-bottom: 16px;
        /deep/ .ant-form-item {
          display: flex;
          margin-bottom: 0;
          &:nth-of-type(2n - 1) {
            padding-right: 39px;
          }
          .required{
            color: red;
            margin-right: 3px;
          }
        }
        .ant-btn{
          color: #ccc;
          width: 100%;
          text-align: left;
          padding: 0 11px;
        }
      }
    }
    /deep/ .ant-form-item-label, .cell-item .label{
      min-width: 160px;
      color: #666;
      font-size: 14px;
      text-align: left;
    }
    /deep/.ant-form-item-children{
      width: 100%;
      display: block;
    }
    /deep/ .ant-form-item-control-wrapper{
      flex: 1;
    }
    .titleBox{
      padding: 24px 0 21px 0;
    }
    .processSet{
      padding-top: 42px;
      .process-explain{
        padding: 16px 0;
        font-size: 12px;
        color: #386BD7;
      }
    }
    .process-user-select{
      .process-user {
        width: 780px;
        display: flex;
        padding-bottom: 16px;
        .ant-select{
          flex: 1;
        }
        span{
          min-width: 115px;
          margin-right: 10px;
        }
      }
    }
  }
}
.headMain {
  padding: 20px 20px 0 20px;
  box-sizing: border-box;
  background-color: #fff;
}
.ant-tabs{
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  padding-top: 10px;
  /deep/.ant-tabs-bar{
    margin: 0;
    padding: 0 25px;
  }
}
.styleTabsMain{
    // overflow: scroll;
    // height: calc(100vh - 401px);
    // width: calc(100% + 8px);
    // padding-bottom: 15px;
    overflow-y: scroll;
    height: calc(100vh - 100px);
    width: calc(100% + 8px);
    padding-bottom: 85px;
    .associatedTaskBook{
      background-color: #fff;
      margin-top: 21px;
    }
    .processSet{
      background-color: #fff;
      margin-top: 21px;
      .process-explain{
        padding: 0 0 15px 15px;
        font-size: 12px;
        color: #386BD7;
      }
    }
    .titleBox{
      margin-bottom: 15px;
      padding: 15px 0;
      border-bottom: 1px solid #ddd;
      display: flex;
      justify-content: space-between;
      .title{
        color: #333;
        font-size: 18px;
        font-weight: bold;
        padding-left: 15px;
      }
      .ant-btn{
        width: 152px;
        margin-right: 15px;
      }
    }
    .tableContent{
      padding: 0 15px;
    }
    .main{
      padding: 0 15px 15px 15px;
      background-color: #fff;
    }
}
.headTitle {
  display: flex;
  & > p {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 28px;
    font-weight: 500;
  }
}
.basicInformation {
  padding-bottom: 62px;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  & > li {
    margin-bottom: 16px;
    width: 33.3%;
    flex-grow: 1;
    & > span:nth-child(1) {
      font-size: 14px;
      color: #666666;
    }
    & > span:nth-child(2) {
      font-size: 14px;
      color: #333333;
    }
    .activeSpan {
      cursor: pointer;
      color: #386bd7 !important;
    }
  }
}
.processName {
  font-size: 20px;
  font-weight: 550;
  color: rgba(0, 0, 0, 0.85);
}
.messageContent {
  width: 100%;
  margin-top: 16px;
  display: flex;
  .message_de {
    width: 30%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .messageList {
      min-width: 25%;
      margin: 5px 0;
      font-size: 14px;
      text-align: right;
      display: flex;
      justify-content: flex-start;
    }
  }
  .message_deOne {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .messageList {
      min-width: 25%;
      margin: 5px 0;
      font-size: 14px;
      text-align: right;
      display: flex;
      justify-content: flex-start;
    }
  }
}
</style>